<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <!--图标样式-->
    <link rel="stylesheet" type="text/css" href="/fonts/font-awesome-4.7.0/css/font-awesome.min.css">

    <!--布局框架-->
    <link rel="stylesheet" type="text/css" href="/css/util.css">

    <!--主要样式-->
    <link rel="stylesheet" type="text/css" href="/css/main.css">

    <div class="limiter">
        <div class="container-login100" style="background-image: url('/images/img-01.jpg');">
            <div class="wrap-login100 p-t-190 p-b-30">
                <van-form @submit="register" class="login100-form validate-form">
                    <!-- <div class="login100-form-avatar">
                        <img src="/images/avatar-01.jpg" alt="AVATAR">
                    </div> -->

                    <span class="login100-form-title p-t-20 p-b-45">注册界面</span>

                    <div class="wrap-input100 validate-input m-b-10">
                        <van-field v-model="business.mobile" name="mobile" required left-icon="phone"
                            placeholder="请输入手机号码" label="" :rules="[
                                { required: true, message: '请填写手机号码' },
                                { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' }
                            ]" />
                    </div>

                    <div class="wrap-input100 validate-input m-b-10">
                        <van-field v-model="business.password" name="password" required left-icon="lock"
                            placeholder="请输入密码" label="" :rules="[{ required: true, message: '请填写密码' }]" />
                    </div>

                    <div class="container-login100-form-btn p-t-10">
                        <van-button round block type="primary" native-type="submit"
                            color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)">
                            注 册
                        </van-button>
                    </div>

                    <div class="text-center w-full p-t-25 p-b-230">
                        <a href="index.html#" class="txt1">忘记密码？</a>
                    </div>

                    <div class="text-center w-full">
                        <router-link class="txt1" to="/business/login">
                            立即登录
                            <i class="fa fa-long-arrow-right"></i>
                        </router-link>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>

<style scoped>
.van-field {
    border-radius: 30px;
}
</style>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

// 获取类似于vue2的this对象
const { proxy } = getCurrentInstance();

onMounted(async () => {
    var result = await proxy.$login()

    //如果有登录，就不重复登录
    if (result.code == 1) {
        var redirect = proxy.$cookies.get('redirect') ? proxy.$cookies.get('redirect') : '/business/index'

        //提醒
        proxy.$success({
            message: "您目前处于登录状态！",
            duration: 1000,
            onClose: () => {
                //跳转
                proxy.$router.push(redirect)
                return false
            }
        })

    }
})

// 创建数据
let business = ref({
    mobile: '13625678989',
    password: ''
})

// eslint-disable-next-line no-unused-vars
const register = async (values) => {
    // console.log(business.value)

    // 发生接口请求
    var result = await proxy.$POST({
        url: '/business/register',
        params: business.value
    })

    // console.log(result)
    // return false

    if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
    }

    // 注册成功后提醒并跳转
    proxy.$success({
        message: result.msg,
        duration: 1000,

        // 关闭时的回调函数
        onClose: () => {
            proxy.$router.push(result.url)      // 跳转到指定网站
            return false
        }
    })


}
</script>